<template>
  <div class="PosterView_contanier app_container">
    <div class="posterTitle">活动名称: {{ activityName }}</div>
    <!-- <div class="poster_box" ref="poster_box" v-if="!mixImg" :style="{ height: imgHeight }">
      <img v-show="posterImg" @load="posterImgLoaded = true" class="posterImg" :src="posterImg" crossorigin="anonymous" />
      <img v-show="userQrcode" @load="userQrcodeLoaded = true" class="userQrcode" :src="userQrcode" crossorigin="anonymous" />
    </div>-->
    <img class="mixImg" :src="mixImg" v-if="mixImg" />
    <div class="btns">
      <button class="btn" v-if="mixImg" @click="handleSave">保存至本地</button>
      <button class="btn" @click="showOverlay = true">分享</button>
    </div>
    <van-overlay :show="showOverlay" @click="showOverlay = false">
      <div class="share_tip"></div>
    </van-overlay>
  </div>
</template>

<script>
// import html2canvas from 'html2canvas'
import { Overlay } from 'vant'
import { getActivityInfo } from '@/api'

// import { userQrcodeHost } from '@/setting'
export default {
  name: 'PosterView',
  components: {
    [Overlay.name]: Overlay
  },
  data() {
    return {
      userInfo: null,
      // imgUrl: '',
      activityName: '',
      //
      posterImg: '',
      userQrcode: '',
      //
      // posterImgLoaded: false,
      // userQrcodeLoaded: false,
      //
      mixImg: '',
      showOverlay: false,
      //
      imgHeight: `${document.body.offsetHeight - 100}px`
    }
  },
  // computed: {
  //   ImagesLoaded() {
  //     return this.userQrcodeLoaded && this.posterImgLoaded
  //   }
  // },
  // watch: {
  //   async ImagesLoaded(val) {
  //     if (val) {
  //       // this.drawImg()
  //       this.$_app_Loading.show()
  //       // await this.drawImg()
  //       this.$_app_Loading.hide()
  //     }
  //   }
  // },
  methods: {
    convertToBlob(_base64) {
      var byteString = atob(_base64.split(',')[1])
      var mimeString = _base64
        .split(',')[0]
        .split(':')[1]
        .split(';')[0]
      var ab = new ArrayBuffer(byteString.length)
      var ia = new Uint8Array(ab)
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ab], {
        type: mimeString
      })
    },
    async initInfo() {
      this.$_app_Loading.show()
      try {
        const res = await getActivityInfo()
        // this.imgUrl = res.data.imgUrl

        this.userInfo = res.data.userInfo
        this.activityName = res.data.activityName
        // document.title = this.activityName
        sessionStorage.setItem('APP_ACTNAME', this.activityName)
        // this.posterImg = res.data.imgUrl
        if (!this.userInfo) {
          this.$router.replace({ name: 'RecordView' })
        }
        // const userQrcodeTicket = res.data.userInfo.imgUrl.split('?')[1]
        // this.userQrcode = `${userQrcodeHost}?${userQrcodeTicket}`
        this.mixImg = this.userInfo.posterUrl
      } catch (error) {
        console.log(error)
      }
      this.$_app_Loading.hide()
    },
    handleSave() {
      const linkDom = document.createElement('a')
      linkDom.href = this.mixImg
      linkDom.download = 'image.png'
      document.body.appendChild(linkDom)
      linkDom.click()
      document.body.removeChild(linkDom)
    }
    //
    // async drawImg() {
    //   try {
    //     const canvas = await html2canvas(this.$refs.poster_box, {
    //       // allowTaint: true
    //       useCORS: true,
    //       scale: 1
    //     })
    //     console.log(canvas)
    //     this.mixImg = URL.createObjectURL(this.convertToBlob(canvas.toDataURL('image/png')))
    //   } catch (error) {
    //     console.log(error)
    //   }
    // }
  },
  // async created() {
  //   await this.initInfo()
  // },
  async mounted() {
    //
    await this.initInfo()
  }
}
</script>

<style lang="scss">
.PosterView_contanier {
  padding: 15px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .posterTitle {
    margin-bottom: 10px;
  }

  .poster_box,
  .mixImg {
    position: relative;
    display: block;
    width: 100%;
    // height: 563px;
    height: calc(100% - 75px);
    object-fit: fill;

    .posterImg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .userQrcode {
      position: absolute;
      width: 100px;
      height: 100px;
      bottom: 20px;
      right: 20px;
    }
  }

  .btns {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .btn {
      flex: 1;
    }

    .btn ~ .btn {
      margin-left: 10px;
    }
  }

  .share_tip {
    position: absolute;
    width: 200px;
    height: 150px;
    background-image: url('../assets/img/share_tip.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    right: 0;
  }
}
</style>
